<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="row">
                            <div class="col-lg-2">
                                Từ ngày:
                            </div>
                            <div class="col-lg-3">
                                <input class="form-control" type="datetime" name="from_date" id="from_date" value="<?php echo $this->fromdate; ?>">        
                            </div>
                            <div class="col-lg-2">
                                Đến:
                            </div>
                            <div class="col-lg-3">
                                <input class="form-control" type="datetime" name="to_date" id="to_date" value="<?php echo $this->todate; ?>">        
                            </div>
                             <div class="col-lg-2">
                            <button class="btn btn-default" id="submit">Submit Button</button>   
                        </div>
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function(){
    $('.form-control').datepicker({showAnim: 'drop', dateFormat: 'dd-mm-yy', showWeek: false, showButtonPanel: false});
    })
</script>
<div class="row">  
    <div class="col-lg-12">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="row">
                    <div class="panel-body">
                        <div class="table-reponsive">
                            <div id="container">
                            </div>
                        </div>
                    </div>  
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
$(document).ready(function () {
    var chart;
    var series=[];
    var options={
        chart: {
            renderTo:'container',
            type: 'column',
        },
        title: {
            text: 'Thông kế số lượng sản phẩm Đại lý bán'
        },
        
        xAxis: {
            type: 'category',
            labels: {
                rotation: -45,
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Số lượng bán được (Tấn)'
            }
        },
        legend: {
            enabled: false
        },
        tooltip: {
            pointFormat: 'Số lượng bán được: <b>{point.y:.1f} Tấn</b>'
        },
        series: []
    };

    $.getJSON("<?php echo $this->baseUrl() ?>/admin/statistic/statisticproductbuy/", 
            {
                fromdate: $('#from_date').val(),
                todate:$('#to_date').val()
            },function (items) {
            series.push({
                    data:items
            });
            options.series = series;
            chart = new Highcharts.Chart(options);
        });
        chart.render();
});
</script>
<script type="text/javascript">
$('#submit').click(function () {
    var chart;
    var series=[];
    var options={
        chart: {
            renderTo:'container',
            type: 'column',
        },
        title: {
            text: 'Thông kế số lượng sản phẩm Đại lý bán'
        },
        
        xAxis: {
            type: 'category',
            labels: {
                rotation: -45,
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Số lượng bán được (Tấn)'
            }
        },
        legend: {
            enabled: false
        },
        tooltip: {
            pointFormat: 'Số lượng bán được: <b>{point.y:.1f} Tấn</b>'
        },
        series: []
    };

    $.getJSON("<?php echo $this->baseUrl() ?>/admin/statistic/statisticproductbuy/", 
            {
                fromdate: $('#from_date').val(),
                todate:$('#to_date').val()
            },function (items) {
            series.push({
                    data:items
            });
            options.series = series;
            chart = new Highcharts.Chart(options);
        });
        chart.render();
});
</script>
